<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="description" content="不超过150个字符" />
    <meta name="keywords" content="" />
    <meta content="caibaojian" name="author" />
    <title>麦谷道</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <!-- 1rem = 设计稿 100px -->
    <script src="../static/js/flexible.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script src="../static/js/vue-2.5.17.min.js"></script>
</head>

<body>
    <div class="index ellipsis" id='index'>
        <!-- 顶部条 -->
        <div class="topBar">
            <div class="logo"></div>
            <a class="location" href="" ><span>福州</span></a>
        </div>

        <!-- swiper 轮播-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <a class="swiper-slide"><img src="../../static/images/index/img_1.png" alt=""></a>
                <a class="swiper-slide"><img src="../../static/images/index/img_5.png" alt=""></a>
                <a class="swiper-slide"><img src="../../static/images/index/img_6.png" alt=""></a>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>

        <!-- 产品列表块 种类1 热销-->
        <div class="list">  
            <!-- 块标题 -->
            <div class="title flex-r-b">
                <h3 class="text">正在热销<span class="tip">HOT</span></h3>
                <a href="" class="more">更多</a>
            </div>
            <!-- 块内容 -->
            <div class="wrapper flex-r-b">
                <div class="card">
                    <a class="pic"  href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic">
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add">
                        </div>
                    </div>
                </div>
                <a class="card">
                    <div class="pic">
                        <img src="../../static/images/index/img_2.png" alt="">
                    </div>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add">
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- 产品列表块 种类2 新品上市-->
        <div class="list">
            <!-- 块标题 -->
            <div class="title flex-r-b">
                <h3 class="text">新品上市
                    <span class="tip">SELL</span>
                </h3>
                <a href="" class="more">更多</a>
            </div>
            <!-- 块内容 -->
            <div class="wrapper flex-r-b">
                <a class="card2">
                    <div class="pic">
                        <img src="../../static/images/index/img_4.png" alt="">
                    </div>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕=========点击弹窗-------></p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click='showAdd'>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- 底部导航条 -->
        <nav class="navBar flex-r-b">
            <a class="navItem active" href="/">
                <div class="icon icon-home">
                    <!-- <img src="../../static/images/index/iocn_4.png" alt=""> -->
                    <img src="../../static/images/index/iocn_4s.png" alt="">
                </div>
                <div class="text">首页</div>
            </a>
            <a class="navItem" href="./allCategories.html">
                <div class="icon icon-all">
                    <img src="../../static/images/index/iocn_5.png" alt="">
                </div>
                <div class="text">所有产品</div>
            </a>
            <a class="navItem" href="./cart.html">
                <div class="icon icon-cart">
                    <img src="../../static/images/index/iocn_6.png" alt="">
                </div>
                <div class="text">购物车</div>
            </a>
            <a class="navItem" href="./orders.html">
                <div class="icon icon-member">
                    <img src="../../static/images/index/iocn_7.png" alt="">
                </div>
                <div class="text">会员中心</div>
            </a>
            <a class="navItem" href="">
                <div class="icon icon-customer">
                    <img src="../../static/images/index/iocn_8.png" alt="">
                </div>
                <div class="text">客服</div>
            </a>
        </nav>

        <!-- 底部弹窗 添加类show 进场动画 移除出场-->
        <div :class="['size-wrapper' ,{show:isShow}]" @touchmove.stop.prevent @click='hideAdd'>
            <!-- 弹窗内容 -->
            <div class="content" @click.stop>
                <div class="top-bar flex-r-b">
                    <span>单价：￥198.00</span>
                    <span class="close" @click='hideAdd'></span>
                </div>
                <div class="icon flex-r-b">
                    <!-- 加类toCart 动画 -->
                    <div :class="['left', {toCart:toCart}]" ></div>
                    <div class="right flex-c-b">
                        <p >1件商品</p>
                        <p>含五件餐具</p>
                        <p>适合4-6人分享</p>
                    </div>
                </div>
                <div class="size-box">
                    <div class="title">规格选择</div>
                    <div class="flex-r-b" @click = 'selecte'>
                        <label class="radio-label" for='size1'>
                            <input type="radio" name='size' id='size1'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size2'>
                            <input type="radio" name='size' id='size2'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size3'>
                            <input type="radio" name='size' id='size3'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>                     
                    </div>
                </div>
                <div class="bottom-bar flex-r-b">
                    <div class="cart"><span :class="['count',{scaleCount:toCart}]">8</span></div>
                    <div class="btn" @click='addToCart'>加入购物车</div>
                    <div class="btn">立即购买</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script> 
    window.onload = function () {
        initSwiper()
    }
    //初始化 swiper
    function initSwiper(){
        var mySwiper = new Swiper ('.swiper-container', {
        //   direction: 'vertical', // 垂直切换选项
        iOSEdgeSwipeDetection : true,
        iOSEdgeSwipeThreshold : 50,
        autoplay:{
            disableOnInteraction : false,
        },
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination'
        }
        })        

    }
    
    //vue 点击add 页面弹窗动画
    var app = new Vue({
        el: '#index',
        data:{
            isShow:false, 
            toCart:false,//添加到购物车动画
        },
        created:function(){
            // console.log(this)
        },
        mounted:function(){
            console.log('vue-mounted')
        },
        methods:{
            showAdd:function(e){
                console.log('show')
                this.isShow = true
            },
            hideAdd:function(){
                console.log('hide')
                this.isShow = false
            },
            selecte: function(e){
                console.log(e.target)
            },
            addToCart: function(){
                if(this.toCart) return
                this.toCart = true
                setTimeout(function() {
                    this.isShow = false
                    this.toCart = false
                }.bind(this), 1100);
            }
        }
    })
</script>
</html>